<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > 
    <head>
        <title>Fixed</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="site.css"   media="all"    type="text/css" />
        <link rel="stylesheet" href="page.css"   media="all"    type="text/css" />
    </head>

    <body>
        <h1>Fixed</h1>
        <div class="gp">
            <h2>Positioned Grandparent</h2>
            <div class="parent">
                <h2>Non-positioned Parent</h2>
                Fixed elements are positioned in their own layer in front of or behind the normal flow.   
                <span id="in_place" class="box">In-place Fixed<br />
                    (<code>position:fixed;</code>)
                    <span class="in_place_relative" class="box">blah blah</span>
                </span>
                <span id="sized" class="box">Sized Fixed<br /><br />
                    <code>
                        bottom:0;<br />
                        left:270px;<br />
                        width:170px;<br />
                        height:115px;<br />
                    </code>
                </span>
                <p id="stretched" class="box">Stretched Fixed<br />
                    <br />
                    <code>
                        right:0;<br />
                        top:0;<br />
                        bottom:0;<br />
                        z-index:-1;<br />
                    </code>
                </p>
                <p id="shrinkwrapped" class="box">Shrinkwrapped Fixed<br /><code>width:auto;</code></p>
                <p id="margin_stretched" class="box">Margin-Stretched Fixed<br />
                    (<code>margin-left:50%;</code>)
                </span>
            </div>
        </div>

        <!-- Extend the page to demonstrated how fixed works. -->
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </body>
</html>
